<template>
  <div class="nav-items">
    <div class="contents">
      <div
        class="content button-unselected hover-style" 
        v-for="(item, index) in lotterys" 
        :key="item.id"
        @click="gotoPages(item.path)"
        >
        <span>{{item.type}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    lotterys: {
      type: Array,
      default: function() {
        return [
          {
            id: 1,
            tab: '时时彩',
            type: '重庆时时彩',
            dateNo: '119217',
            drawTime: new Date().getTime() + 10000,
            bg: require('@/assets/imgs/caizhong_bj_01.svg'),
            icon: 'iconicon_chongqingshishi',
            path: '/select-number/shishicai'
          },
          {
            id: 2,
            tab: '时时彩',
            type: '急速时时彩',
            dateNo: '119217',
            drawTime: new Date().getTime() + 10000,
            bg: require('@/assets/imgs/caizhong_bj_01.svg'),
            icon: 'iconicon_jisushishicai'
          },
          {
            id: 3,
            tab: '时时彩',
            type: '天津时时彩',
            dateNo: '119217',
            drawTime: new Date().getTime() + 10000,
            bg: require('@/assets/imgs/caizhong_bj_02.svg'),
            icon: 'iconicon_tianjinshishica'
          },
          {
            id: 4,
            tab: '时时彩',
            type: '新疆时时彩',
            dateNo: '119217',
            drawTime: new Date().getTime() + 10000,
            bg: require('@/assets/imgs/caizhong_bj_04.svg'),
            icon: 'iconicon_xinjiangshishic'
          },
        ]
      }
    }
  },
  created() {
    console.log(this.lotterys)
  },
  methods: {
    gotoPages(path) {
      this.$router.push({path})
    }
  }
}
</script>

<style lang="stylus" scoped>
  .nav-items 
    border-left 6px solid #cca566
    .contents 
      display flex 
      flex-wrap wrap 
      align-items center
      justify-content space-between 
      width 347px 
      box-sizing border-box 
      padding 20px 
      padding-bottom 10px
      .content 
        box-sizing border-box 
        width calc((100% - 20px) / 3) 
        height 32px
        line-height 32px
        text-align center
        margin-bottom 10px
        color $color-theme-dark
        &.button-selected 
          color #fff
</style>
